<template>
    <el-form status= icon  ref="form" label-width="100px" class="login_container">
        <h3 class="login_title">系统登录</h3>
        <el-form-item label="用户名" label-width="80px" prop="username" class="username">
            <el-input type="input" v-model="username" aria-autocomplete="off" aria-placeholder="请输入账号"
            ></el-input>
        </el-form-item>
        <el-form-item label="密码" label-width="80px" prop="password">
            <el-input type="password" v-model="password" aria-autocomplete="off" aria-placeholder="请输入密码"
            ></el-input>
        </el-form-item>
        <el-form-item class="login_submit" >
            <el-button style="width:160px" type="primary" @click="login" class="login_submit">登录</el-button>
        </el-form-item>
        <a @click="register" class="reg">前往注册</a>
    </el-form>
</template>
<script>
import axios from 'axios';

export default {
    name:'login',
    data(){
        return{
            username:'',
            password:'',
        }
    },
    methods:{
        login(){
            if(this.username ==''){
                this.$message.error('用户名不能为空');
            }else if(this.password == ''){
                this.$message.error('密码不能为空');
            }else{
                axios.get('http://localhost:9999/login',{
                    params:{
                        name:this.username,
                        password:this.password
                    }
                }).then(res=>{
                    if(res.data.status == 200){
                        this.$router.push({
                            path:'/home',
                        });
                        let userInfo = {
                            isLogin: true,
                            name: this.username
                        }
                        console.log(res.data.status)
                        localStorage.setItem('userIngo',JSON.stringify(userInfo));
                        this.$store.state.userInfo = userInfo
                        this.Cookie.set('username',this.username)
                    }else{
                        this.$alert('用户名或密码错误',{
                            confirmButtonText:'确定',
                            callback: action =>{
                                this.username = '',
                                this.password = ''
                            }
                        })
                    }
                }).catch(err=>{
                    console.log('登录失败')
                })
            }
        },
        register(){
            this.$router.push('/register')
        }
    }
}
</script>
<style lang="less" scoped>
.login_container{
    width: 400px;
    border-radius: 15px;
    background-clip: padding-box;
	margin: 100px auto;
    padding: 35px 35px 35px 35px;
    background-color: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
}
.login_title{
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
}
.login_submit{
    margin: 10px auto 0px auto;
}
</style>